import Vue from 'vue'

Vue.directive('fullscreen', {
    inserted(el, bind) {
        let targetDom = document.querySelector(bind.value)
        el.onclick = (e) => {
            let isFullscreen = targetDom.offsetHeight === window.screen.height
            if (isFullscreen) {
                el.setAttribute('title','全屏')
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                el.setAttribute('title','退出全屏')
                if (targetDom.requestFullscreen) {
                    targetDom.requestFullscreen();
                } else if (targetDom.webkitRequestFullScreen) {
                    targetDom.webkitRequestFullScreen();
                } else if (targetDom.mozRequestFullScreen) {
                    targetDom.mozRequestFullScreen();
                } else if (targetDom.msRequestFullscreen) {
                    targetDom.msRequestFullscreen();
                }
            }
        }

    }
})
